
<script setup>
import {onMounted,defineProps} from 'vue'
import * as echarts from 'echarts';

const props= defineProps({
  StageV:{type:Array,default:()=>[]},
  StageT:{type:Array,default:()=>[]},
})
// console.log(props.StageV,'props');

onMounted(()=>{
var chartDom = document.getElementById('pipe');
var myChart = echarts.init(chartDom);
var option;

// option = {
//   grid:{
//     left: '20%',
//   },
//   xAxis: {
//     type: 'category',
//     data: props.StageT
//   },
//   yAxis: {
//     type: 'value',
//     name: 'm³',
//     nameGap: 16,
//     axisLabel: {
//             formatter: function (value) {
//                 // 将数值转换为万为单位
//                 if (value >= 10000 || value <= -10000) {
//                     return (value / 10000).toFixed(0) + '万';
//                 }
//                 return value;
//             }
//         }
//   },
//   tooltip: {
//     trigger: 'axis'
//   },
//   series: [
//     {
//       data: props.StageV,
//       type: 'line',
//       smooth: true
//     }
//   ]
// };
// option && myChart.setOption(option);

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // prettier-ignore
    data: props.StageT
  },  
   yAxis: {
    type: 'value',
    name: 'm³',
    nameGap: 16,
    axisLabel: {
            formatter: function (value) {
                // 将数值转换为万为单位
                if (value >= 10000 || value <= -10000) {
                    return (value / 10000).toFixed(0) + '万';
                }
                return value;
            }
        }
  },
  series: [
    {
      type: 'line',
      // smooth: true,
      data: props.StageV,
      lineStyle: {
      color: '#4D88FF',
      },
      itemStyle:{
        color:'#4D88FF'
      }
    }
  ]
};

option && myChart.setOption(option);
})

</script>

<template>
  <div style="width: 310px;height: 225px;" id="pipe"></div>
</template>


<style>

</style>